<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.min.css' rel='stylesheet'>
    <link href='https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'>
    <link rel="stylesheet" href="dist/index.css">
</head>
<body>
    <header>
        <div class="search">
            <div class="logo">
                <i class="fa fa-home" aria-hidden="true"></i>
            </div>
            <div class="searchbox">
                <i class="fa fa-search" aria-hidden="true"></i>
                <input type="text" placeholder="搜索商品名称">
            </div>
            <div class="user">
                <i class="fa fa-user" aria-hidden="true"></i>
            </div>
        </div>
        <!-- 导航条 -->
        <nav>
            <a href="" class="active">推荐</a>
            <a href="">手机</a>
            <a href="">智能</a>
            <a href="">电视</a>
            <a href="">笔记本</a>
            <a href="">家电</a>
            <i class="fa fa-arrow-down" aria-hidden="true"></i>
        </nav>
    </header>
     
    <main>
        <div class="slide">
            <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9aefda414dcdb687676319f8259609de.jpg?thumb=1&w=720&h=360" alt=""></a>
        </div>
        <div class="icon">
            <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb65daec7ef7b52cc785f88f78efba37.png?w=216&h=228&bg=FDF1E6" alt=""></a>
            <a href=""><img src="https://i8.mifile.cn/v1/a1/eb5024fe-dfe3-6e53-3e18-675bef5fa06e.webp?w=216&h=228&bg=EAF6FD" alt=""></a>
            <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d436f30612651fffe1d6c5aaa3fdb816.png?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
            <a href=""><img src="https://i8.mifile.cn/v1/a1/e8bc849a-0a3b-21a0-6810-7da3a3903dee.webp?w=216&h=228&bg=FDEFDE" alt=""></a>
            <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb4cbd9dabf2c2aef15e43f5bcab5cb9.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
            <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/64f3988b6216e4c1ab62a7f50df3e816.png?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
            <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ea68dee2bfa0e55a82236b0d968e975.png?w=216&h=228&bg=FCEAEA" alt=""></a>
            <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/96c780016ea196743905dc93f9249c39.png?w=216&h=228&bg=FDF5E5" alt=""></a>
            <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9425031cdd7af22d9a23a5ae16d1f57c.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
            <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f11f9df6b0b0b428f8c8fc3267131830.png?w=216&h=228&bg=FDEDE8" alt=""></a>
        </div>
        <div class="ad">
            <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d692a30ee3d586c4274575eec255d3c5.jpg?f=webp&w=537&h=762&bg=C1DDE9" alt=""></a>
            <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e32e68b1a554cd84af032d8ee03bf6d.jpeg?f=webp&w=537&h=378&bg=C1DDE9" alt=""></a>
            <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e2dd638ceb36697af693973ff85a7a9b.jpg?f=webp&w=537&h=378&bg=E0FCFF" alt=""></a>
        </div>
        <div class="hot">
            <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/067047e99bc9517e85bbc5d2d854779a.jpg?f=webp&w=1080&h=420&bg=241941" alt=""></a>
            <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c226d76d6036e165523338e63f6d2da4.jpg?f=webp&w=1080&h=660&bg=F9FDFE" alt=""></a>
        </div>

        <div class="goods">
            <a href="">
                <div class="preview">
                  <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f90791bccff62ad03a0476156e7bb16d.jpg?thumb=1&w=344&h=280" alt="" />
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 50倍变焦</div>
                <div class="price">
                  4999
                  <span>起</span>
                </div>
      
                <div class="cart">立即购买</div>
              </a>

              <a href="">
                <div class="preview">
                  <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9b3b7c52bffab0806c54652ee0872a64.jpg?thumb=1&w=344&h=280" alt="" />
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 1亿像素相机</div>
                <div class="price">
                  3799
                  <span>起</span>
                </div>
      
                <div class="cart">立即购买</div>
              </a>
        </div>
    </main>

    <footer>
        <a href="" class="active">
            <i class="fa fa-home" aria-hidden="true"></i>
            首页
        </a>
        <a href=""> 
            <i class="fa fa-bath" aria-hidden="true"></i>
            分类
        </a>
        <a href="">
            <i class="fa fa-plane" aria-hidden="true"></i>
            星球
        </a>
        <a href="">
            <i class="fa fa-car" aria-hidden="true"></i>
            购物车
        </a>
        <a href="">
            <i class="fa fa-user" aria-hidden="true"></i>
            我的
        </a>
    </footer>
</body>
</html>